<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>IT农场--基于socket.io的即时投票系统</title>

		
		<link rel="stylesheet" href="css/reveal.min.css">
		<link rel="stylesheet" href="css/theme/default.css" id="theme">

		<!-- For syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- If the query includes 'print-pdf', include the PDF print sheet -->
		<script>
			if( window.location.search.match( /print-pdf/gi ) ) {
				var link = document.createElement( 'link' );
				link.rel = 'stylesheet';
				link.type = 'text/css';
				link.href = 'css/print/pdf.css';
				document.getElementsByTagName( 'head' )[0].appendChild( link );
			}

			/*
			 * UI界面动态背景
			 * 面向对象构造方案
			 */
			var ui = {

				setting: {
					MyMar: 0,
					speed: 45, //背景刷新速率
				},
				body_position: function() {
					var bg = document.getElementsByTagName("body")[0];

					var position_x = bg.style.backgroundPositionX;
					position_x = parseInt(position_x.substr(0, position_x.length - 1))
						//position_x++;
					if (position_x) {
						position_x++;
						bg.style.backgroundPositionX = position_x.toString() + "px";
					} else {
						bg.style.backgroundPositionX = "1px";
					}
				},
				init: function() {
					this.setting.MyMar = setInterval(this.body_position, this.setting.speed);
				},
				pause: function() {
					clearInterval(this.setting.MyMar);
				}
			}
			ui.init();

		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
		
	</head>

	<body>

		<div class="reveal">
			<div class="slides">
				<section>
					<h1>60组</h1>
					<p>
						<small>基于socket.io的即时投票系统</small>
					</p>
				</section>
				
				<section>
                    <h3>小组成员</h3>
                    <ul>
	                    <li>
	                    杨鹏飞：IT农场60组队长，主攻前端励志全栈的偏感性理科生。主要负责本项目中主要负责前端基本页面实现和项目介绍。
	                    </li>
	                    <br>
	                    <li>
	                     杨添坤：IT农场60组成员，JAVA WEB程序员一枚，主要负责本项目的后端socket.io通信代码设计和服务端的封装。
	                    </li>
                    </ul>
				</section>

                <section>
                	<h4>基于socket.io的即时投票系统</h4>
                	<h3><small>立项背景</small></h3>
                	<ol>
                		<li><small>
                			特定场合（如课堂上的辩证讨论问题、比赛现场投票）下，难以找到合适的工具可以实现现场投票和即时交流的系统
                		</small></li>
                		<br>
                		<li><small>基于socket.io的即时投票系统恰好可以补充这一层面的空缺，提出基于局域网（如无线AP、校园网等）环境下实现并发量可观的即时投票和交流系统，借助发起投票的PC作为服务器，用户的手机作为客户端进行交互。</small></li>
                	</ol>
                </section>

				<section>
                   <h4>实现功能介绍</h3>
                   <ul>
                   	<li><small>
                   		在特定场合下（如课堂上的辩证讨论问题、比赛现场投票），发起投票只需要在PC机运行服务器端已经封装好程序。（模拟的场景是在同一局域网内的实现）
                   	</small></li>
                   	<br>
                   	<li><small>
                   		手机端只需要通过浏览器扫描二维码打开WEB APP页面实现现场实时交流和即时投票，并在公共的投影屏幕展示出处理后的数据图表和IM(即时通讯)交流信息。
                   	</small></li>
                   	<br>
                   	<li><small>
                   		原计划使用PHONEGAP封装客户端成为独立的应用程序，考虑到便携性则采用B/S模型来实现这个系统的基本功能。
                   	</small></li>
                   </ul>
                </section>

                <section>
                   <h2>说明文档</h2>
                </section>

                <section>
                	<img src="image/运行服务端.png">
                	<p>运行item文件夹下的item.exe</p>
                </section>

                <section>
                	<img src="image/创建投票.png">
                	<p>点击右上角的创建投票</p>
                </section>

                <section>
                	<img src="image/查看二维码.png">
                	<p>显示二维码，手机端打开微信或者浏览器扫描二维码</p>
                </section>

                <section>
                    <img src="image/进入系统.jpg" width="300px", height="600px">
                    <img src="image/测试对话.jpg" width="300px", height="600px">
                    <img src="image/投票.jpg" width="300px", height="600px">
                    <p>客户端基本功能</p>
                </section>

                <section>
                    <img src="image/发送悄悄话.jpg" width="300px", height="600px">
                    <img src="image/接收悄悄话.jpg" width="300px", height="600px">
                    <p>接收和发送私聊悄悄话</p>
                </section>

                <section>
                	<img src="image/投票结果.png">
                	<p>投票效果如图</p>
                </section>

                <section>
                	<div id="canvasDiv" class="canvas-box"></div>
                	<br>
                	<p><a id="openG1">查看图表</a></p>
                </section>

                <section>
                	<div id="canvasDiv2" class="canvas-box"></div>
                	<br>
                	<p><a id="openG2">查看图表</a></p>
                </section>

                <section>
                	<h4>项目特色</h4>
                	<ul>
                		<li><small>使用场景为局域网的通讯，保证了网络环境的通畅。</small></li>
                		<li><small>基于node.js和socket.io，双向连接的延迟更低，并发量可观。</small></li>
                		<li><small>页面和大量的图形基于HTML5的实现，快速开发不失个性化。</small></li>
                	</ul>
                </section>

                <section>
                	<h4>小组总结</h4>
                	<p><small>1、突发奇想和受众广泛的IDEA</small></p>
                	<p><small>2、项目带来的压力有助于提升编程能力。</small></p>
                	<p><small>3、探索一个前沿的领域</small></p>
                	<p><small>4、其实项目很小</small></p>
                </section>
                
                <section>
                	<h4>小小的建议</h4>
                	<p><small>项目范围</small></p>
                	<p><small>项目管理</small></p>
                </section>
                <section>
                	<h3>Thank You！</h3>
                </section>
			</div>

		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.min.js"></script>
		<script src="js/ichart.1.2.src.js"></script>
		<script>

			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				center: true,

				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
				transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none

				// Parallax scrolling
				// parallaxBackgroundImage: 'b4.jpg',
				// parallaxBackgroundSize: '1300px 900px',

				// Optional libraries used to extend on reveal.js
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
					{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
				]
			});
			

			var open1 = function() {
				var data = [
				        	{name : 'Other',value : 0.73,color:'#6f83a5'},
				        	{name : 'IE',value : 35.75,color:'#a5c2d5'},
				        	{name : 'Chrome',value : 29.84,color:'#cbab4f'},
				        	{name : 'Firefox',value : 24.88,color:'#76a871'},
				        	{name : 'Safari',value : 6.77,color:'#9f7961'},
				        	{name : 'Opera',value : 2.02,color:'#a56f8f'}
			        	];
	        	
				new iChart.Pie2D({
					render : 'canvasDiv',
					data: data,
					title : '用户量前5名的浏览器',
					legend : {
						enable : true
					},
					sub_option : {
						label : {
							background_color:null,
							sign:false,//设置禁用label的小图标
							padding:'0 4',
							border:{
								enable:false,
								color:'#666666'
							},
							fontsize:11,
							fontweight:600,
							color : '#4572a7'
						},
						border : {
							width : 2,
							color : '#ffffff'
						}
					},
					animation:true,
					showpercent:true,
					decimalsnum:2,
					width : 800,
					height : 400,
					radius:140
				}).draw();
			}

			var open2 = function () {
				var data = [{
					name : '天语',
					value : 2.83,
					color : '#4572a7'
				}, {
					name : '苹果',
					value : 3.44,
					color : '#4572a7'
				}, {
					name : 'HTC',
					value : 3.66,
					color : '#4572a7'
				}, {
					name : '金立',
					value : 4.58,
					color : '#4572a7'
				}, {
					name : '中兴',
					value : 6.56,
					color : '#4572a7'
				}, {
					name : '酷派',
					value : 6.85,
					color : '#4572a7'
				}, {
					name : '诺基亚',
					value : 9.42,
					color : '#4572a7'
				}, {
					name : '华为',
					value : 9.54,
					color : '#4572a7'
				}, {
					name : '联想',
					value : 11.00,
					color : '#4572a7'
				}, {
					name : '三星',
					value : 15.73,
					color : '#4572a7'
				}];

				new iChart.Bar2D({
					render : 'canvasDiv2',
					background_color : '#EEEEEE',
					data : data,
					title : '2012年6月中国手机市场份额TOP10',
					subtitle : '联想手机超越诺基亚，以11%市场份额，成为中国市场第二',
					footnote : '数据来源：赛诺',
					width : 800,
					height : 400,
					coordinate : {
						width : 640,
						height : 260,
						axis : {
							width : [0, 0, 1, 1]
						},
						scale : [{
							position : 'bottom',
							start_scale : 0,
							end_scale : 18,
							scale_space : 2
						}]
					},
					animation : true,
					sub_option : {
						listeners : {
							parseText : function(r, t) {
								return t + "%";
							}
						}
					},
					legend : {
						enable : false
					}
				}).draw();
			}
			
			var btn1 = document.getElementById('openG1');
			var btn2 = document.getElementById('openG2');
			btn1.onclick = open1;
			btn2.onclick = open2;
		</script>

	</body>
</html>
